<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0 auto;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    .pagecut{
       
        width: 500px;
        height: auto;
       
    }
    .pagecut>ul>li{
       
        padding: 2px 0;
        border-bottom: 1px solid #eee;
      
   }
    #list{
        width: 100%;
        height: auto;
    }
    .content{
        width: 100%;
        height: auto;
        padding-top: 15px;
    }
    .content span:nth-child(1){
        padding:3px 13px;
        border: 1px solid #eee;
    }
   .select{
       padding: 4px 10px;
       text-align: center;
   }
   .content ul{
       display:inline-block;
      
   }
   .content ul li{
      float: left;
      padding: 4px 10px;
      text-align: center;
      border: 1px solid #eee;   
   }
</style>
<body>
   
    <div class="pagecut">
        <ul id="list">
           
        </ul>
        <div class="content">
                <span class="sum">总共12</span>
                <select class="select">
                
                    
                    <option>2</option>
                    <option>1</option>
                </select>
                <span class="lBtn">上一页</span>
                <ul class="uls">
                   
                </ul>
                <span class="rBtn">下一页</span>
        </div>
      
    </div>
    <!-- <script src="./index.js"></script> -->
    <script>
         class cutPage{
            constructor(obj){
                this.parent=obj.el;
                this.sum=this.parent.querySelector('.sum');
                this.select=this.parent.querySelector('.select');
                this.uls=this.parent.querySelector('.uls');
                this.list=this.parent.querySelector('#list');
                this.lBtn=this.parent.querySelector('.lBtn');
                this.rBtn=this.parent.querySelector('.rBtn');
                this.data=obj.data;
                
                this.pageLength=obj.pageLength;
                this.cb1=obj.cb1;
                this.cb2=obj.cb2;
                this.limit=1;
               
                this.init();
                
            }
            init(){
                this.getSum();
                this.getPage();
                this.bindEvent();
                this.getPagelist();
                this.getList();
            }
           
            getSum(){ 
                this.sum.innerHTML=`总共${this.data.length}页`;    
            }
            getPage(){
                this.select.innerHTML=this.pageLength.map((item)=>{
                    return `<option value=${item}>每页${item}条</option>`;
                })
            }
            getPagelist(){
              
                let selectVal=2;
                selectVal=(this.select.value*1);
                    
                this.num=Math.ceil(this.data.length/selectVal);
                for(var i=0;i<this.num;i++){
                    this.uls.innerHTML+=`<li>${i+1}</li>`;
                }
    
            }
            getList(){

                this.stat=(this.limit-1)*this.select.value;
                this.end=(this.limit*1)*this.select.value;
                console.log(this.stat,this.end);
                this.list.innerHTML=this.data.slice(this.stat,this.end).map((ele)=>{
                    return ` <li>${ele}</li>`
                }).join('')

            }

            bindEvent(){
                
                this.select.onchange=()=>{
                    this.uls.innerHTML='';
                    this.getList();
                    this.getPagelist();
                   
                }   
                     
                this.uls.onclick=(e)=>{
                    this.limit=e.target.innerHTML;
                   
                    this.getList();
                }

                this.lBtn.onclick=()=>{
                    if(this.limit>1){
                        this.limit--;
                        this.getList();
                    }
                   
                }
                this.rBtn.onclick=()=>{
                    if(this.limit<this.num){

                        this.limit++;
                        this.getList();
                    }
                    
                }

            }

            

        }
      
        var obj = new cutPage({
            el: document.querySelector(".pagecut"), //类挂载的元素
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], //总数据
            pageLength: [2, 5, 10, 15], //每页显示的数据条数；（select框显示的数据）

            //select框中的每页展示条数改变时触发，获取到当前选择的每页显示的条数
            cb1: function(data) {
                console.log(data)
            },            //页码改变时触发，接受到当前页的数据
            cb2: function(data) {
                console.log(data);
            }
        })

   
    </script>
</body>

</html>